<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>[转]Jquery 插件设计模式_[repost]jquery-plugin-patterns | 宅鱼</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google-site-verification" content="yH7MwnMb7LXru16F4FAfY94pn-oZLhF8Szu4PuL7Oxw" />
  <meta name="description" content="原文：coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/ By Addy Osmani译者原文: http://wlog.cn/jquery/essential-jquery-plugin-patterns.html译者注：目前还有部分内容没有翻译完成，如翻译有误，敬请指正。 我前面写过javascrip">
<meta name="keywords" content="javascript,jquery">
<meta property="og:type" content="article">
<meta property="og:title" content="[转]Jquery 插件设计模式_[repost]jquery-plugin-patterns">
<meta property="og:url" content="http://ikkkr.com/2014/03/03/e8-bd-acjquery-e6-8f-92-e4-bb-b6-e8-ae-be-e8-ae-a1-e6-a8-a1-e5-bc-8f-repostjquery-plugin-patterns/index.html">
<meta property="og:site_name" content="宅鱼">
<meta property="og:description" content="原文：coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/ By Addy Osmani译者原文: http://wlog.cn/jquery/essential-jquery-plugin-patterns.html译者注：目前还有部分内容没有翻译完成，如翻译有误，敬请指正。 我前面写过javascrip">
<meta property="og:locale" content="default">
<meta property="og:updated_time" content="2018-04-01T12:38:40.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="[转]Jquery 插件设计模式_[repost]jquery-plugin-patterns">
<meta name="twitter:description" content="原文：coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/ By Addy Osmani译者原文: http://wlog.cn/jquery/essential-jquery-plugin-patterns.html译者注：目前还有部分内容没有翻译完成，如翻译有误，敬请指正。 我前面写过javascrip">
  
    <link rel="alternative" href="/atom.xml" title="宅鱼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico"  type="image/x-ico">
   
  <link rel="stylesheet" href="/css/style.css">
  

</head>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">宅鱼</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">部落格</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">首页</a>
        
          <a class="main-nav-link" href="/archives">文章</a>
        
          <a class="main-nav-link" href="/raincss">RainCSS</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://ikkkr.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-e8-bd-acjquery-e6-8f-92-e4-bb-b6-e8-ae-be-e8-ae-a1-e6-a8-a1-e5-bc-8f-repostjquery-plugin-patterns" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/03/03/e8-bd-acjquery-e6-8f-92-e4-bb-b6-e8-ae-be-e8-ae-a1-e6-a8-a1-e5-bc-8f-repostjquery-plugin-patterns/" class="article-date">
  <time datetime="2014-03-03T03:25:05.000Z" itemprop="datePublished">2014-03-03</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a>►<a class="article-category-link" href="/categories/javascript-amp-Ajax/jquery/">jquery</a>►<a class="article-category-link" href="/categories/javascript-amp-Ajax/jquery/web-development/">web development</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      [转]Jquery 插件设计模式_[repost]jquery-plugin-patterns
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>原文：<a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/" target="_blank" rel="noopener">coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/</a> By <a href="http://addyosmani.com/blog/" target="_blank" rel="noopener">Addy Osmani</a><br>译者原文: <a href="http://wlog.cn/jquery/essential-jquery-plugin-patterns.html" target="_blank" rel="noopener">http://wlog.cn/jquery/essential-jquery-plugin-patterns.html</a><br>译者注：目前还有部分内容没有翻译完成，如翻译有误，敬请指正。</p>
<p>我前面写过<a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/" target="_blank" rel="noopener">javascript 设计模式</a>，它为javascript开发中的一些常见问题提供了很好的解决方案，使用这些设计模式将使你的开发获益良多。众所周知，javascript 设计模式非常有用，另一方面得益于它自己的设计模式：jquery 插件。 官方的<a href="http://docs.jquery.com/Plugins/Authoring" target="_blank" rel="noopener">jQuery 插件开发指南</a> 可以作为学习编写插件的一个很好的开始。在这篇文章中我们将更深入了解jquery插件开发技巧。</p>
<p>jquery插件开发经过这几年的不断发展，我们现在很少只使用一种方式来编写插件。事实上，使用特定的设计模式在某些解决某些特定问题或场景，比其它模式更为有效。</p>
<p>一些开发人员可能希望使用jQuery UI 组件 工厂模式（the jQuery UI widget factory），这种模式适合复杂、灵活的UI组件。另外一些开发人员可能喜欢像模块(类似模块模式)一样组织他们的代码，或者使用更正式的模块模式如<a href="https://github.com/amdjs/amdjs-api/wiki/AMD" target="_blank" rel="noopener">AMD</a>(asynchronous module definition) 。还有一些开发人员希望他们的插件使用javascript强大的原型继承。还有另外一些开发人员可能想使用自定义的事件或发布/订阅(pub/sub)使插件和app之间通信。等等…</p>
<p>我注意到一些开发者尝试创建一种通用的jquery插件模板（one-size-fits-all jQuery plugin boilerplate）, 这引发了我的思考。理论上来说，使用统一模板（boilerplate）是一个很好的想法，然而，实际开发中，我们很少只使用一种模式来开发插件。</p>
<p>假如你自己动手编写过一些jquery插件，它们运行良好，但是，你可能会觉得它可以有更好的代码组织结构，它可以更灵活，解决更多的问题。这听起来很熟悉，你不确定不同的jquery插件模式之间的差异，你会发现我后面将要讲的内容非常有用。</p>
<p>这篇文章不会为你提供所有问题的解决方案，但是它覆盖了所有开发人员在使用的流行的设计模式。</p>
<p>注：这篇文章主要面向由中高级的开发人员。如果你觉得还没准备好，推荐你可以先看官方的<a href="http://docs.jquery.com/Plugins/Authoring" target="_blank" rel="noopener">jQuery 插件开发指南</a> 、Ben Alman的<a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff696759" target="_blank" rel="noopener">plugin style guide</a>和Remy Sharp的<a href="http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/" target="_blank" rel="noopener">Signs of a Poorly Written jQuery Plugin</a>。</p>
<h2 id="模式-Patterns"><a href="#模式-Patterns" class="headerlink" title="模式(Patterns)"></a>模式(Patterns)</h2><p>jQuery插件定义了很少的规则，而这也是为什么这些插件方法多种多样的原因之一。最简单的，你可以为jquery的$.fn对象添加一个方法，如：</p>
<pre><code>$.fn.myPluginName = function() {
    // your plugin logic
};
</code></pre><p>前面的方法很间单，不过下面的这种方法会更好一些：</p>
<pre><code>(function( $ ){
    $.fn.myPluginName = function() {
        // your plugin logic
    };
})( jQuery );
</code></pre><p>这里，我们在插件代码内嵌到一个匿名函数中，使用匿名函数创建了一个闭包，将jQuery这个全局变量传入匿名函数，并执行匿名函数。这样可以确保$不会和其它的javascript库冲突，避免$变量和页面中的全局变量冲突。</p>
<p>还有另外一种写法是使用$.extend，使用这种方法一次可以定义多个方法，这在有些场景下非常有用：</p>
<pre><code>(function( $ ){
    $.extend($.fn, {
        myplugin: function(){
            // your plugin logic
        }
    });
})( jQuery );
</code></pre><p>对此，我们可以做一些改进。首先，我们来看第一个完整的模式 - 轻量级的模式（the lightweight pattern），这种模式覆盖了我们日常插件开发的一些最佳实践和常见问题。</p>
<p><strong>注意：</strong></p>
<p>你可在<a href="https://github.com/addyosmani/jquery-plugin-patterns/" target="_blank" rel="noopener">jquery-plugin-patterns</a>(翻译本文时，项目已经迁移到<a href="https://github.com/jquery-boilerplate/patterns" target="_blank" rel="noopener">jquery-boilerplate/patterns</a>)这个项目找到这篇文章里面谈到的设计模式。</p>
<p>虽然，这篇文章会对每一种模式做讲解，但是还是建议阅读代码中的注释，注释可以让你更深入的了解为什么使用这种做法是最好的。</p>
<p>另外，如果有兴趣的话也可以读一下每种模式后面的扩展内容。</p>
<h2 id="简单的开始-A-Lightweight-Start"><a href="#简单的开始-A-Lightweight-Start" class="headerlink" title="简单的开始(A Lightweight Start)"></a>简单的开始(A Lightweight Start)</h2><p>首先，我们先来看一些基本的、遵循最佳实践(包括jQuery插件编写指南)的设计模式。这种模式在开发一个新的插件或实现一些简单插件时非常理想。轻量级的插件模式遵循了下面的一些原则:</p>
<ul>
<li>常见的最佳做法，如函数的调用前使用一个分号; window, document, undefined作为参数传入;遵循jQuery风格规范。</li>
<li>插件默认配置。</li>
<li>一个简单的插件的构造函数,用于逻辑相关的初始化和委派元素处理。</li>
<li>使插件的配置可扩展。</li>
<li>避免创建多个实例。</li>
</ul>
<p>代码：</p>
<pre><code>/*!
 * jQuery lightweight plugin boilerplate
 * Original author: @ajpiano
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */

// the semi-colon before the function invocation is a safety 
// net against concatenated scripts and/or other plugins 
// that are not closed properly.
;(function ( $, window, document, undefined ) {

    // undefined is used here as the undefined global 
    // variable in ECMAScript 3 and is mutable (i.e. it can 
    // be changed by someone else). undefined isn&apos;t really 
    // being passed in so we can ensure that its value is 
    // truly undefined. In ES5, undefined can no longer be 
    // modified.

    // window and document are passed through as local 
    // variables rather than as globals, because this (slightly) 
    // quickens the resolution process and can be more 
    // efficiently minified (especially when both are 
    // regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = &apos;defaultPluginName&apos;,
        defaults = {
            propertyName: &quot;value&quot;
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method that merges the 
        // contents of two or more objects, storing the 
        // result in the first object. The first object 
        // is generally empty because we don&apos;t want to alter 
        // the default options for future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {
        // Place initialization logic here
        // You already have access to the DOM element and
        // the options via the instance, e.g. this.element 
        // and this.options
    };

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, &apos;plugin_&apos; + pluginName)) {
                $.data(this, &apos;plugin_&apos; + pluginName, 
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://docs.jquery.com/Plugins/Authoring" target="_blank" rel="noopener">Plugins/Authoring</a>, jQuery</li>
<li><a href="http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/" target="_blank" rel="noopener">Signs of a Poorly Written jQuery Plugin</a>, Remy Sharp</li>
<li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff608209" target="_blank" rel="noopener">How to Create Your Own jQuery Plugin</a>, Elijah Manor</li>
<li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff696759" target="_blank" rel="noopener">Style in jQuery Plugins and Why It Matters</a>, Ben Almon</li>
<li><a href="http://enterprisejquery.com/2010/07/create-your-first-jquery-plugin-part-2-revising-your-plugin/" target="_blank" rel="noopener">Create Your First jQuery Plugin, Part 2</a>, Andrew Wirick</li>
</ul>
<h2 id="完整的-Widget-factory-“Complete”-Widget-Factory"><a href="#完整的-Widget-factory-“Complete”-Widget-Factory" class="headerlink" title="完整的 Widget factory(“Complete” Widget Factory)"></a>完整的 Widget factory(“Complete” Widget Factory)</h2><p>代码：</p>
<pre><code>/*!
 * jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
 * Author: @addyosmani
 * Further changes: @peolanha
 * Licensed under the MIT license
 */

;(function ( $, window, document, undefined ) {

    // define your widget under a namespace of your choice
    //  with additional parameters e.g. 
    // $.widget( &quot;namespace.widgetname&quot;, (optional) - an 
    // existing widget prototype to inherit from, an object 
    // literal to become the widget&apos;s prototype ); 

    $.widget( &quot;namespace.widgetname&quot; , {

        //Options to be used as defaults
        options: {
            someValue: null
        },

        //Setup widget (eg. element creation, apply theming
        // , bind events etc.)
        _create: function () {

            // _create will automatically run the first time 
            // this widget is called. Put the initial widget 
            // setup code here, then you can access the element 
            // on which the widget was called via this.element. 
            // The options defined above can be accessed 
            // via this.options this.element.addStuff();
        },

        // Destroy an instantiated plugin and clean up 
        // modifications the widget has made to the DOM
        destroy: function () {

            // this.element.removeStuff();
            // For UI 1.8, destroy must be invoked from the 
            // base widget
            $.Widget.prototype.destroy.call(this);
            // For UI 1.9, define _destroy instead and don&apos;t 
            // worry about 
            // calling the base widget
        },

        methodB: function ( event ) {
            //_trigger dispatches callbacks the plugin user 
            // can subscribe to
            // signature: _trigger( &quot;callbackName&quot; , [eventObject], 
            // [uiObject] )
            // eg. this._trigger( &quot;hover&quot;, e /*where e.type == 
            // &quot;mouseenter&quot;*/, { hovered: $(e.target)});
            this._trigger(&apos;methodA&apos;, event, {
                key: value
            });
        },

        methodA: function ( event ) {
            this._trigger(&apos;dataChanged&apos;, event, {
                key: value
            });
        },

        // Respond to any changes the user makes to the 
        // option method
        _setOption: function ( key, value ) {
            switch (key) {
            case &quot;someValue&quot;:
                //this.options.someValue = doSomethingWith( value );
                break;
            default:
                //this.options[ key ] = value;
                break;
            }

            // For UI 1.8, _setOption must be manually invoked 
            // from the base widget
            $.Widget.prototype._setOption.apply( this, arguments );
            // For UI 1.9 the _super method can be used instead
            // this._super( &quot;_setOption&quot;, key, value );
        }
    });

})( jQuery, window, document );
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://ajpiano.com/widgetfactory/#slide1" target="_blank" rel="noopener">The jQuery UI Widget Factory</a></li>
<li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff706600" target="_blank" rel="noopener">Introduction to Stateful Plugins and the Widget Factory</a>，Doug Neiner</li>
<li><a href="http://wiki.jqueryui.com/w/page/12138135/Widget%20factory" target="_blank" rel="noopener">Widget Factory(explained)</a> Scott Gonzalez</li>
<li><a href="http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/" target="_blank" rel="noopener">Understanding jQuery UI Widgets: A Tutorial</a>，Hacking at 0300</li>
</ul>
<h2 id="命名空间和嵌套的命名空间"><a href="#命名空间和嵌套的命名空间" class="headerlink" title="命名空间和嵌套的命名空间"></a>命名空间和嵌套的命名空间</h2><p>使用命名空间可以避免你的代码和和全局变量或对象冲突。命名空间可以保护你的插件不会被页面上的其它同名变量或者和你的插件同名的插件破坏。同样，你也不要使其它开发者的脚本无法运行。</p>
<p>JavaScript没有其它语言一样的内置了命名空间，但很容易使用对象来模拟命名空间。可以将一个顶级对象作为你的命名空间，可以在一开始先检查这个对象是否存在，如果不存在就定义它，如果存在，你直接可以扩展它。</p>
<p>对象（确切地说，对象字面量）可以用来创建嵌套的命名空间，如namespace.subnamespace.pluginName等。</p>
<pre><code>/*!
 * jQuery namespaced &apos;Starter&apos; plugin boilerplate
 * Author: @dougneiner
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

;(function ( $ ) {
    if (!$.myNamespace) {
        $.myNamespace = {};
    };

    $.myNamespace.myPluginName = function ( el, myFunctionParam, options ) {
        // To avoid scope issues, use &apos;base&apos; instead of &apos;this&apos;
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data( &quot;myNamespace.myPluginName&quot; , base );

        base.init = function () {
            base.myFunctionParam = myFunctionParam;

            base.options = $.extend({}, 
            $.myNamespace.myPluginName.defaultOptions, options);

            // Put your initialization code here
        };

        // Sample Function, Uncomment to use
        // base.functionName = function( paramaters ){
        // 
        // };
        // Run initializer
        base.init();
    };

    $.myNamespace.myPluginName.defaultOptions = {
        myDefaultValue: &quot;&quot;
    };

    $.fn.mynamespace_myPluginName = function 
        ( myFunctionParam, options ) {
        return this.each(function () {
            (new $.myNamespace.myPluginName(this, 
            myFunctionParam, options));
        });
    };

})( jQuery );
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/" target="_blank" rel="noopener">Namespacing in JavaScript</a>,Angus Croll</li>
<li><a href="http://ryanflorence.com/use-your-fn-jquery-namespace/" target="_blank" rel="noopener">Use Your $.fn jQuery Namespace</a>,Ryan Florence</li>
<li><a href="http://michaux.ca/articles/javascript-namespacing" target="_blank" rel="noopener">JavaScript Namespacing</a>,Peter Michaux</li>
<li><a href="http://www.2ality.com/2011/04/modules-and-namespaces-in-javascript.html" target="_blank" rel="noopener">Modules and namespaces in JavaScript</a>,Axel Rauschmayer</li>
</ul>
<h2 id="Pub-Sub自定义事件"><a href="#Pub-Sub自定义事件" class="headerlink" title="Pub/Sub自定义事件"></a>Pub/Sub自定义事件</h2><p>你可能在开发异步JavaScript应用时使用过观察者模式（ 又名发布-订阅者模式(Pub/Sub) pattern）。观察者模式的本质是对应用中某个对象状态进行观察，并且在其发生改变时能够对通知做出响应。</p>
<p>在jQuery中，jquery提供的自定义事件和观察者模式很类似，bind(‘eventType’)相当于subscribe(‘eventType’)，trigger(‘eventType’)相当于publish(‘eventType’)。</p>
<p>一些开发者可能认为jQuery事件系统作为发布和订阅系统使用开销太大，但是它的构架在多数情况下非常健壮和稳定。在 jQuery UI widget factory 模板中，我们实现了一个基本的自定义事件的发布/订阅模式：</p>
<pre><code>/*!
 * jQuery custom-events plugin boilerplate
 * Author: DevPatch
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

// In this pattern, we use jQuery&apos;s custom events to add 
// pub/sub (publish/subscribe) capabilities to widgets. 
// Each widget would publish certain events and subscribe 
// to others. This approach effectively helps to decouple 
// the widgets and enables them to function independently.

;(function ( $, window, document, undefined ) {
    $.widget(&quot;ao.eventStatus&quot;, {
        options: {

        },

        _create : function() {
            var self = this;

            //self.element.addClass( &quot;my-widget&quot; );

            //subscribe to &apos;myEventStart&apos;
            self.element.bind( &quot;myEventStart&quot;, function( e ) {
                console.log(&quot;event start&quot;);
            });

            //subscribe to &apos;myEventEnd&apos;
            self.element.bind( &quot;myEventEnd&quot;, function( e ) {
                console.log(&quot;event end&quot;);
            });

            //unsubscribe to &apos;myEventStart&apos;
            //self.element.unbind( &quot;myEventStart&quot;, function(e){
                ///console.log(&quot;unsubscribed to this event&quot;); 
            //});
        },

        destroy: function(){
            $.Widget.prototype.destroy.apply( this, arguments );
        },
    });
})( jQuery, window , document );

//Publishing event notifications
//usage: 
// $(&quot;.my-widget&quot;).trigger(&quot;myEventStart&quot;);
// $(&quot;.my-widget&quot;).trigger(&quot;myEventEnd&quot;);
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://wlog.cn/jquery/essential-jquery-plugin-patterns.html" target="_blank" rel="noopener">Communication Between jQuery UI Widgets</a>,Benjamin Sternthal</li>
<li><a href="http://wlog.cn/jquery/essential-jquery-plugin-patterns.html" target="_blank" rel="noopener">Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability</a>,Addy Osmani</li>
</ul>
<h2 id="带桥接模式的原型继承"><a href="#带桥接模式的原型继承" class="headerlink" title="带桥接模式的原型继承"></a>带桥接模式的原型继承</h2><p>在javascript中，没有类的概念。但是，我们可以使用javascript的原型继承，我们可以在juqery插件开发中使用原型继承。</p>
<p><a href="http://alexsexton.com/" target="_blank" rel="noopener">Alex Sexton</a> 和 <a href="http://scottgonzalez.com/" target="_blank" rel="noopener">Scott Gonzalez</a>已经详细的谈过这个话题。简而言之,使用桥接模式可以弱化它和使用它的类和对象之间的耦合。另外，桥接模式有助于保持API的简洁，你可以更容易的对你的插件进行单元测试。</p>
<p>在Sexton的文章中，他实现了一个可以让你添加自己的逻辑代码的桥接模式模板，你可以看下面的代码了解更多。这种模式的另一个优点你不必不断重复相同的插件初始化代码。一些开发人员可能觉得这种模式比其它模式更容易阅读：</p>
<pre><code>/*!
 * jQuery prototypal inheritance plugin boilerplate
 * Author: Alex Sexton, Scott Gonzalez
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

// myObject - an object representing a concept that you want 
// to model (e.g. a car)
var myObject = {
  init: function( options, elem ) {
    // Mix in the passed-in options with the default options
    this.options = $.extend( {}, this.options, options );

    // Save the element reference, both as a jQuery
    // reference and a normal reference
    this.elem  = elem;
    this.$elem = $(elem);

    // Build the DOM&apos;s initial structure
    this._build();

    // return this so that we can chain and use the bridge with less code.
    return this;
  },
  options: {
    name: &quot;No name&quot;
  },
  _build: function(){
    //this.$elem.html(&apos;
</code></pre><h1 id="‘-this-options-name-’"><a href="#‘-this-options-name-’" class="headerlink" title="‘+this.options.name+’"></a>‘+this.options.name+’</h1><p>‘);<br>      },<br>      myMethod: function( msg ){<br>        // You have direct access to the associated and cached<br>        // jQuery element<br>        // this.$elem.append(‘</p>
<p>‘+msg+’<br>‘);<br>      }<br>    };</p>
<pre><code>// Object.create support test, and fallback for browsers without it
if ( typeof Object.create !== &apos;function&apos; ) {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

// Create a plugin based on a defined object
$.plugin = function( name, object ) {
  $.fn[name] = function( options ) {
    return this.each(function() {
      if ( ! $.data( this, name ) ) {
        $.data( this, name, Object.create(object).init( 
        options, this ) );
      }
    });
  };
};

// Usage:
// With myObject, we could now essentially do this:
// $.plugin(&apos;myobj&apos;, myObject);

// and at this point we could do the following
// $(&apos;#elem&apos;).myobj({name: &quot;John&quot;});
// var inst = $(&apos;#elem&apos;).data(&apos;myobj&apos;);
// inst.myMethod(&apos;I am a method&apos;);
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://alexsexton.com/?p=51" target="_blank" rel="noopener">Using Inheritance Patterns To Organize Large jQuery Applications</a>,Alex Sexton</li>
<li><a href="http://www.slideshare.net/SlexAxton/how-to-manage-large-jquery-apps" target="_blank" rel="noopener">How to Manage Large Applications With jQuery or Whatever</a>, Alex Sexton</li>
<li><a href="http://blog.bigbinary.com/2010/03/12/pratical-example-of-need-for-prototypal-inheritance.html" target="_blank" rel="noopener">Practical Example of the Need for Prototypal Inheritance</a>,Neeraj Singh</li>
<li><a href="http://javascript.crockford.com/prototypal.html" target="_blank" rel="noopener">Prototypal Inheritance in JavaScript</a>,Douglas Crockford</li>
</ul>
<h2 id="jQuery-UI-Widget-Factory-Bridge"><a href="#jQuery-UI-Widget-Factory-Bridge" class="headerlink" title="jQuery UI Widget Factory Bridge"></a>jQuery UI Widget Factory Bridge</h2><pre><code>/*!
 * jQuery UI Widget factory &quot;bridge&quot; plugin boilerplate
 * Author: @erichynds
 * Further changes, additional comments: @addyosmani
 * Licensed under the MIT license
 */

// a &quot;widgetName&quot; object constructor
// required: this must accept two arguments,
// options: an object of configuration options
// element: the DOM element the instance was created on
var widgetName = function( options, element ){
  this.name = &quot;myWidgetName&quot;;
  this.options = options;
  this.element = element;
  this._init();
}

// the &quot;widgetName&quot; prototype
widgetName.prototype = {

    // _create will automatically run the first time this 
    // widget is called
    _create: function(){
        // creation code
    },

    // required: initialization logic for the plugin goes into _init
    // This fires when your instance is first created and when 
    // attempting to initialize the widget again (by the bridge)
    // after it has already been initialized.
    _init: function(){
        // init code
    },

    // required: objects to be used with the bridge must contain an 
    // &apos;option&apos;. Post-initialization, the logic for changing options
    // goes here. 
    option: function( key, value ){

        // optional: get/change options post initialization
        // ignore if you don&apos;t require them.

        // signature: $(&apos;#foo&apos;).bar({ cool:false });
        if( $.isPlainObject( key ) ){
            this.options = $.extend( true, this.options, key );

        // signature: $(&apos;#foo&apos;).option(&apos;cool&apos;); - getter
        } else if ( key &amp;&amp; typeof value === &quot;undefined&quot; ){
            return this.options[ key ];

        // signature: $(&apos;#foo&apos;).bar(&apos;option&apos;, &apos;baz&apos;, false);
        } else {
            this.options[ key ] = value;
        }

        // required: option must return the current instance. 
        // When re-initializing an instance on elements, option 
        // is called first and is then chained to the _init method.
        return this;  
    },

    // notice no underscore is used for public methods
    publicFunction: function(){ 
        console.log(&apos;public function&apos;);
    },

    // underscores are used for private methods
    _privateFunction: function(){ 
        console.log(&apos;private function&apos;);
    }
};

// usage:

// connect the widget obj to jQuery&apos;s API under the &quot;foo&quot; namespace
// $.widget.bridge(&quot;foo&quot;, widgetName);

// create an instance of the widget for use
// var instance = $(&quot;#elem&quot;).foo({
//     baz: true
// });

// your widget instance exists in the elem&apos;s data
// instance.data(&quot;foo&quot;).element; // =&gt; #elem element

// bridge allows you to call public methods...
// instance.foo(&quot;publicFunction&quot;); // =&gt; &quot;public method&quot;

// bridge prevents calls to internal methods
// instance.foo(&quot;_privateFunction&quot;); // =&gt; #elem element
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/" target="_blank" rel="noopener">Using $.widget.bridge Outside of the Widget Factory</a>,Eric Hynds</li>
</ul>
<h2 id="jQuery-Mobile-Widgets-With-The-Widget-factory"><a href="#jQuery-Mobile-Widgets-With-The-Widget-factory" class="headerlink" title="jQuery Mobile Widgets With The Widget factory"></a>jQuery Mobile Widgets With The Widget factory</h2><pre><code>/*!
 * (jQuery mobile) jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
 * Author: @scottjehl
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

;(function ( $, window, document, undefined ) {

    //define a widget under a namespace of your choice
    //here &apos;mobile&apos; has been used in the first parameter
    $.widget( &quot;mobile.widgetName&quot;, $.mobile.widget, {

        //Options to be used as defaults
        options: {
            foo: true,
            bar: false
        },

        _create: function() {
            // _create will automatically run the first time this 
            // widget is called. Put the initial widget set-up code 
            // here, then you can access the element on which 
            // the widget was called via this.element
            // The options defined above can be accessed via 
            // this.options

            //var m = this.element,
            //p = m.parents(&quot;:jqmData(role=&apos;page&apos;)&quot;),
            //c = p.find(&quot;:jqmData(role=&apos;content&apos;)&quot;)
        },

        // Private methods/props start with underscores
        _dosomething: function(){ ... },

        // Public methods like these below can can be called 
                // externally: 
        // $(&quot;#myelem&quot;).foo( &quot;enable&quot;, arguments );

        enable: function() { ... },

        // Destroy an instantiated plugin and clean up modifications 
        // the widget has made to the DOM
        destroy: function () {
            //this.element.removeStuff();
            // For UI 1.8, destroy must be invoked from the 
            // base widget
            $.Widget.prototype.destroy.call(this);
            // For UI 1.9, define _destroy instead and don&apos;t 
            // worry about calling the base widget
        },

        methodB: function ( event ) {
            //_trigger dispatches callbacks the plugin user can 
            // subscribe to
            //signature: _trigger( &quot;callbackName&quot; , [eventObject],
            //  [uiObject] )
            // eg. this._trigger( &quot;hover&quot;, e /*where e.type == 
            // &quot;mouseenter&quot;*/, { hovered: $(e.target)});
            this._trigger(&apos;methodA&apos;, event, {
                key: value
            });
        },

        methodA: function ( event ) {
            this._trigger(&apos;dataChanged&apos;, event, {
                key: value
            });
        },

        //Respond to any changes the user makes to the option method
        _setOption: function ( key, value ) {
            switch (key) {
            case &quot;someValue&quot;:
                //this.options.someValue = doSomethingWith( value );
                break;
            default:
                //this.options[ key ] = value;
                break;
            }

            // For UI 1.8, _setOption must be manually invoked from 
            // the base widget
            $.Widget.prototype._setOption.apply(this, arguments);
            // For UI 1.9 the _super method can be used instead
            // this._super( &quot;_setOption&quot;, key, value );
        }
    });

})( jQuery, window, document );

//usage: $(&quot;#myelem&quot;).foo( options );

/* Some additional notes - delete this section before using the boilerplate.

 We can also self-init this widget whenever a new page in jQuery Mobile is created. jQuery Mobile&apos;s &quot;page&quot; plugin dispatches a &quot;create&quot; event when a jQuery Mobile page (found via data-role=page attr) is first initialized.

We can listen for that event (called &quot;pagecreate&quot; ) and run our plugin automatically whenever a new page is created.

$(document).bind(&quot;pagecreate&quot;, function (e) {
    // In here, e.target refers to the page that was created 
    // (it&apos;s the target of the pagecreate event)
    // So, we can simply find elements on this page that match a 
    // selector of our choosing, and call our plugin on them.
    // Here&apos;s how we&apos;d call our &quot;foo&quot; plugin on any element with a 
    // data-role attribute of &quot;foo&quot;:
    $(e.target).find(&quot;[data-role=&apos;foo&apos;]&quot;).foo(options);

    // Or, better yet, let&apos;s write the selector accounting for the configurable 
    // data-attribute namespace
    $(e.target).find(&quot;:jqmData(role=&apos;foo&apos;)&quot;).foo(options);
});

That&apos;s it. Now you can simply reference the script containing your widget and pagecreate binding in a page running jQuery Mobile site, and it will automatically run like any other jQM plugin.
 */
</code></pre><h2 id="RequireJS-And-The-jQuery-UI-Widget-Factory"><a href="#RequireJS-And-The-jQuery-UI-Widget-Factory" class="headerlink" title="RequireJS And The jQuery UI Widget Factory"></a>RequireJS And The jQuery UI Widget Factory</h2><h2 id="Globally-And-Per-Call-Overridable-Options-Best-Options-Pattern"><a href="#Globally-And-Per-Call-Overridable-Options-Best-Options-Pattern" class="headerlink" title="Globally And Per-Call Overridable Options (Best Options Pattern)"></a>Globally And Per-Call Overridable Options (Best Options Pattern)</h2><h2 id="AMD-And-CommonJS-Compatible-Modules"><a href="#AMD-And-CommonJS-Compatible-Modules" class="headerlink" title="AMD- And CommonJS-Compatible Modules"></a>AMD- And CommonJS-Compatible Modules</h2><h2 id="如何编写一个优秀的插件？"><a href="#如何编写一个优秀的插件？" class="headerlink" title="如何编写一个优秀的插件？"></a>如何编写一个优秀的插件？</h2><p>最后，来看一下我在选择第三方插件时遵循的一些原则，它对你开发插件来说非常有用:</p>
<p><strong>质量</strong></p>
<p>尽可能的遵循javascript和juqery最佳实践。在编辑写插件时，思考一下，这是最佳的解决方案吗？它们是否遵循jQuery 插件开发指南？如果不是，你的代码至少应该干净可读。</p>
<p><strong>兼容性</strong></p>
<p>你的插件都支持哪个版本的jquery?最新的版本是否经过测试？ 我更喜欢一些插件作者在必要时更新他们的插件，至少，测试一下插件对jquery新版本的支持情况，确保插件正常运行。</p>
<p><strong>可靠性</strong></p>
<p>你的插件应该有单元测试，单元测试不仅可以验证你的插件能否正常的运行，同时可以保证在不影响用户使用的情况下改进你的插件。我认为用于在生产环境插件都需要进行单元测试，它们并不难写。建议你可以看一下<a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg749824" target="_blank" rel="noopener">QUnit下的JavaScript自动化单元测试</a>。</p>
<p><strong>性能</strong></p>
<p>如果你的插件需要执行大量复杂的计算，或者频繁对DOM进行操作，建议你使用<a href="http://jsperf.com/" target="_blank" rel="noopener">jsPerf.com</a>测试你的代码在不同的浏览器的性能。</p>
<p><strong>文档</strong></p>
<p>如果你打算让其它的开发人员使用你的插件，请确保它有良好的文档。插件有哪些方法？有哪些配置选项？有哪些用户需要注意的陷阱？如果他们无法搞清楚你的插件如何使用，他们可能会寻找别外和替代方案。另外，你的代码也需要良好的注释，这对于使用你插件的其他开发者很有用。 If someone feels they can navigate your code base well enough to fork it or improve it, then you’ve done a good job.</p>
<p><strong>维护</strong></p>
<p>发布一个插件时，预计一下你会有多少时间来提供插件的维护和支持。我们都喜欢在一些社区分享自己的插件，但这需要时间和精力来回答问题,解决问题,并做出改进。最简单的，你可以ReadMe文件中说明，让用户自己决定是否他们自己来修复遇到的问题。</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>前面，我们探讨了几种可以改善jquery插件开发的设计模式。在特定的场景下，一些模式会比另一些更合适，我希望代码中的注释对有助于你深入理解这些设计模式。</p>
<p>记住，不要为了使用设计模式而使用设计模式，而是需要花些时间去理解这些模式，了解如何选择合适的模式来解决你的问题或适应你的组件。总之，选择合适的设计模式很重要。</p>
<p>-happy coding!</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/jquery/">jquery</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2014/03/13/e6-89-8b-e6-9c-ba-e7-ab-af-e5-9b-ba-e5-ae-9a-e5-ae-9a-e4-bd-8d-e5-85-83-e7-b4-a0-e4-b8-8d-e5-8f-af-e7-82-b9-e5-87-bb-e9-97-ae-e9-a2-98-e5-a4-84-e7-90-86-mobile-fixed-element-can-not-click-issue/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          手机端固定定位元素不可点击问题处理_mobile fixed element can not click issue
        
      </div>
    </a>
  
  
    <a href="/2014/02/26/ie6-e5-8d-8a-e9-80-8f-e6-98-8e-e6-9c-80-e5-a5-bd-e8-a7-a3-e5-86-b3-e6-96-b9-e6-b3-95dd-belatedpng/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">ie6半透明最好解决方法DD_belatedPNG</div>
    </a>
  
</nav>

  


<div class="ds-thread" data-thread-key="2014/03/03/e8-bd-acjquery-e6-8f-92-e4-bb-b6-e8-ae-be-e8-ae-a1-e6-a8-a1-e5-bc-8f-repostjquery-plugin-patterns/"></div>

</article></section>
        
          <aside id="sidebar">
  
    <div class="widget-wrap">
  <h3 class="widget-title">Github</h3>
  <div class="widget">
    <ul class="category-list"><li class="category-list-item"><a href="https://github.com/rainzhai">https://github.com/rainzhai</a></li></ul>
  </div>
</div>

  <div class="widget-wrap">
    <h3 class="widget-title">分类 Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a><span class="category-list-count">29</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/html5/">html5</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/">web development</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/blog/">blog</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/">computer science</a><span class="category-list-count">10</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/java-web/">java web</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/web-development/">web development</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/算法/">算法</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/html5/">html5</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/">hybrid</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/phonegap/">phonegap</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/java-web/">java web</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">23</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/">jquery</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/web-development/">web development</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/web-development/">web development</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/算法/">算法</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/jquery/">jquery</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/php/">php</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/web-development/">web development</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/">智趣</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/游戏/">游戏</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/生活/">生活</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/未分类/">未分类</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/模块化/">模块化</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/游戏/">游戏</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/生活/">生活</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/资源/">资源</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签 Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Angularjs/">Angularjs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS-3/">CSS 3</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/D2/">D2</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DIY/">DIY</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Design/">Design</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Structure/">Structure</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/android/">android</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/app/">app</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/blog/">blog</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bug/">bug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css3/">css3</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/debug/">debug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/dojo/">dojo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/easy-ui/">easy ui</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/firefox/">firefox</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/flash/">flash</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/free-hosting/">free hosting</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/game/">game</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/geekTime/">geekTime</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html5/">html5</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hybrid/">hybrid</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ie/">ie</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ios/">ios</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">28</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery-mobile/">jquery mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jsp/">jsp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mobile/">mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/photos/">photos</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/php/">php</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/requirejs/">requirejs</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/seam/">seam</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/svg/">svg</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/threejs/">threejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ued/">ued</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/w3c标准/">w3c标准</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/web/">web</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webapp/">webapp</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webgl/">webgl</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webpage/">webpage</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/wordpress/">wordpress</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/上下文/">上下文</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/分享/">分享</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端/">前端</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端-Javascript-css-ES6/">前端 Javascript css ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/学习/">学习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能/">性能</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/总结/">总结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/效率/">效率</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/模块化/">模块化</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/游戏/">游戏</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/理论/">理论</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/生活/">生活</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/社会化网络/">社会化网络</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动/">移动</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动端开发/">移动端开发</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/编程/">编程</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/美女/">美女</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/翻译/">翻译</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/范式/">范式</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/设计模式/">设计模式</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语义网/">语义网</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语言/">语言</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/资源/">资源</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/转载/">转载</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面向对象/">面向对象</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/风景/">风景</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云 Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Angularjs/" style="font-size: 10px;">Angularjs</a> <a href="/tags/CSS/" style="font-size: 19.09px;">CSS</a> <a href="/tags/CSS-3/" style="font-size: 13.64px;">CSS 3</a> <a href="/tags/D2/" style="font-size: 10px;">D2</a> <a href="/tags/DIY/" style="font-size: 10px;">DIY</a> <a href="/tags/Design/" style="font-size: 10.91px;">Design</a> <a href="/tags/Structure/" style="font-size: 16.36px;">Structure</a> <a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/app/" style="font-size: 10px;">app</a> <a href="/tags/blog/" style="font-size: 10.91px;">blog</a> <a href="/tags/bug/" style="font-size: 10px;">bug</a> <a href="/tags/css3/" style="font-size: 14.55px;">css3</a> <a href="/tags/debug/" style="font-size: 10px;">debug</a> <a href="/tags/dojo/" style="font-size: 10px;">dojo</a> <a href="/tags/easy-ui/" style="font-size: 10px;">easy ui</a> <a href="/tags/firefox/" style="font-size: 10px;">firefox</a> <a href="/tags/flash/" style="font-size: 10px;">flash</a> <a href="/tags/free-hosting/" style="font-size: 10px;">free hosting</a> <a href="/tags/game/" style="font-size: 10px;">game</a> <a href="/tags/geekTime/" style="font-size: 10px;">geekTime</a> <a href="/tags/html/" style="font-size: 13.64px;">html</a> <a href="/tags/html5/" style="font-size: 18.18px;">html5</a> <a href="/tags/hybrid/" style="font-size: 11.82px;">hybrid</a> <a href="/tags/ie/" style="font-size: 10.91px;">ie</a> <a href="/tags/ios/" style="font-size: 10px;">ios</a> <a href="/tags/java/" style="font-size: 17.27px;">java</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/jquery/" style="font-size: 15.45px;">jquery</a> <a href="/tags/jquery-mobile/" style="font-size: 10.91px;">jquery mobile</a> <a href="/tags/jsp/" style="font-size: 10px;">jsp</a> <a href="/tags/mobile/" style="font-size: 10.91px;">mobile</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/photos/" style="font-size: 10px;">photos</a> <a href="/tags/php/" style="font-size: 10px;">php</a> <a href="/tags/requirejs/" style="font-size: 10.91px;">requirejs</a> <a href="/tags/seam/" style="font-size: 10.91px;">seam</a> <a href="/tags/svg/" style="font-size: 10px;">svg</a> <a href="/tags/threejs/" style="font-size: 10px;">threejs</a> <a href="/tags/ued/" style="font-size: 10.91px;">ued</a> <a href="/tags/w3c标准/" style="font-size: 12.73px;">w3c标准</a> <a href="/tags/web/" style="font-size: 13.64px;">web</a> <a href="/tags/webapp/" style="font-size: 10.91px;">webapp</a> <a href="/tags/webgl/" style="font-size: 10px;">webgl</a> <a href="/tags/webpage/" style="font-size: 10.91px;">webpage</a> <a href="/tags/wordpress/" style="font-size: 11.82px;">wordpress</a> <a href="/tags/上下文/" style="font-size: 10px;">上下文</a> <a href="/tags/分享/" style="font-size: 10.91px;">分享</a> <a href="/tags/前端/" style="font-size: 16.36px;">前端</a> <a href="/tags/前端-Javascript-css-ES6/" style="font-size: 10px;">前端 Javascript css ES6</a> <a href="/tags/学习/" style="font-size: 10px;">学习</a> <a href="/tags/性能/" style="font-size: 12.73px;">性能</a> <a href="/tags/总结/" style="font-size: 10.91px;">总结</a> <a href="/tags/效率/" style="font-size: 11.82px;">效率</a> <a href="/tags/模块化/" style="font-size: 10.91px;">模块化</a> <a href="/tags/游戏/" style="font-size: 11.82px;">游戏</a> <a href="/tags/理论/" style="font-size: 14.55px;">理论</a> <a href="/tags/生活/" style="font-size: 10.91px;">生活</a> <a href="/tags/社会化网络/" style="font-size: 10.91px;">社会化网络</a> <a href="/tags/移动/" style="font-size: 10px;">移动</a> <a href="/tags/移动端开发/" style="font-size: 10px;">移动端开发</a> <a href="/tags/算法/" style="font-size: 13.64px;">算法</a> <a href="/tags/编程/" style="font-size: 18.18px;">编程</a> <a href="/tags/美女/" style="font-size: 10px;">美女</a> <a href="/tags/翻译/" style="font-size: 13.64px;">翻译</a> <a href="/tags/范式/" style="font-size: 12.73px;">范式</a> <a href="/tags/设计模式/" style="font-size: 11.82px;">设计模式</a> <a href="/tags/语义网/" style="font-size: 10px;">语义网</a> <a href="/tags/语言/" style="font-size: 19.09px;">语言</a> <a href="/tags/资源/" style="font-size: 10.91px;">资源</a> <a href="/tags/转载/" style="font-size: 10px;">转载</a> <a href="/tags/面向对象/" style="font-size: 10px;">面向对象</a> <a href="/tags/风景/" style="font-size: 10px;">风景</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">文章 Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">July 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">June 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">August 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">July 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">April 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">March 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">November 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">October 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">May 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/04/">April 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">March 2014</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/02/">February 2014</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/01/">January 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/12/">December 2013</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">November 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/10/">October 2013</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/09/">September 2013</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">August 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/07/">July 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/06/">June 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">May 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/03/">March 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/01/">January 2013</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/11/">November 2012</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/08/">August 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/06/">June 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/05/">May 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/04/">April 2012</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/03/">March 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/02/">February 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/01/">January 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/12/">December 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/11/">November 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/10/">October 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/09/">September 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/08/">August 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/07/">July 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/06/">June 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/04/">April 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/02/">February 2011</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/01/">January 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/12/">December 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/11/">November 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/10/">October 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/09/">September 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/08/">August 2010</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/06/">June 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/04/">April 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/01/">January 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2009/08/">August 2009</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最近 Recents</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2018/07/23/nvm安装问题处理-nvm-is-not-compatible-with-the-npm-config-prefix-option-错误/">nvm安装问题处理 nvm is not compatible with the npm config prefix option 错误</a>
          </li>
        
          <li>
            <a href="/2018/06/06/前端知识体系大全/">前端知识体系大全</a>
          </li>
        
          <li>
            <a href="/2016/08/28/使用Angularjs开发控制台类项目/">使用Angularjs开发控制台类项目</a>
          </li>
        
          <li>
            <a href="/2016/07/11/Apicloud开发app的问题总结/">Apicloud开发app的问题总结</a>
          </li>
        
          <li>
            <a href="/2016/04/25/前端面试经典问题/">前端面试经典问题</a>
          </li>
        
      </ul>
    </div>
  </div>

  
      <div class="widget-wrap">
<h3 class="widget-title">友情链接 Links</h3>
<div class="widget">
<ul>
<li><a href="http://wande.me" title="玩的么" target="_blank">玩的么</a></li>
</ul>
</ul>
</div>
  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2018 宅鱼<br>
      更多游戏： <a href="http://wande.me"  target="_blank">玩的么</a><br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">首页</a>
  
    <a href="/archives" class="mobile-nav-link">文章</a>
  
    <a href="/raincss" class="mobile-nav-link">RainCSS</a>
  
</nav>
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"rainzhai"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共JS代码 end -->

<script type="text/javascript" src="http://wandeme.com/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F49ba6eabd43121d820d9120777bdaf30' type='text/javascript'%3E%3C/script%3E"));
</script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>